<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getequipmentlist } from '@/api/echarts';

export default {
  name: "map-view",
  data() {
    return {
      map: null,
      points: [],
      markers: [],
      cluster: null,
      geocoder: null, // 逆地理编码器
    };
  },
  created() {
    this.fetchEquipmentList();
  },
  mounted() {
    this.initAMap(); // 确保在组件挂载后调用
  },
  methods: {
    async fetchEquipmentList() {
      try {
        const res = await getequipmentlist({ limit: 10000000 });
        console.log(res, "研究地图");

        this.points = res.msg
          .filter(item => item.lat && item.lng)
          .map(item => ({
            lnglat: [parseFloat(item.lng), parseFloat(item.lat)],
            city: item.city || '鞍山',
            district: item.district || 'Unknown',
            street: item.street || 'Unknown',
          }));

        console.log('Filtered points:', this.points);

        this.initMarkers(); // 确保 `initMarkers` 在 `methods` 中定义

        if (this.map) {
          this.initCluster();
        }

        await this.getAddressesFromPoints(this.points);
      } catch (error) {
        console.error('Error fetching equipment list:', error);
      }
    },
    async initAMap() {
      await this.loadAMapScript();
      AMapLoader.load({
        key: "YOUR_AMAP_KEY", // 替换为你的高德 API 密钥
        version: "2.0",
        plugins: ["AMap.Scale", "AMap.MarkerClusterer", "AMap.Geocoder"],
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 4,
            center: [116.397428, 39.90923],
            mapStyle: "amap://styles/blue",
          });

          this.map.addControl(new AMap.Scale());
          this.geocoder = new AMap.Geocoder();
          this.initMarkers(); // 确保 `initMarkers` 在 `methods` 中定义
          this.initCluster(); // 确保 `initCluster` 在 `methods` 中定义
        })
        .catch((e) => {
          console.log(e);
        });
    },
    async loadAMapScript() {
      // 异步加载 AMap 脚本的代码
    },
    initMarkers() {
      if (!this.map || !this.points) return;
      this.markers = this.points.map(point => {
        return new AMap.Marker({
          position: point.lnglat,
          map: this.map,
          extData: point,
        });
      });
    },
    initCluster() {
      if (this.cluster) {
        this.cluster.setMap(null);
      }
      this.cluster = new AMap.MarkerClusterer(this.map, this.markers, {
        gridSize: 80,
        renderClusterMarker: this.renderClusterMarker,
        styles: this.getClusterStyles(),
      });
    },
    getClusterStyles() {
      // 返回聚合样式的代码
    },
    renderClusterMarker(context) {
      // 渲染聚合标记的代码
    },
    async getAddressesFromPoints(points) {
      // 获取地址的代码
    },
    async getAddressFromCoordinates(lng, lat) {
      // 获取单个坐标地址的代码
    },
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
